<template></template>

<script setup>
import {inject, ref, onMounted, toRaw, nextTick} from 'vue'
const $echarts = inject('$echarts');// 变量全局化 echarts
import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入



const water = (data) => {
  let chartDom = document.getElementById(data.id);
  let myChart = $echarts.init(chartDom)
  var value = data.value;
  const color = value > 60 ? '#fff' : '#fff'
  const subColor = value > 50 ? '#fff' : '#fff'
  const option = {
    title: [
      {
        text: '实时在线',
        left: '50%',
        top: '40%',
        textAlign: 'center',
        textStyle: {
          color: color,
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 18,
          lineHeight: 18,
        },
        subtext: `{value|${value}}{unit|%}`, //`${value}{unit}个`,    // 副标题
        subtextStyle: {    // 副标题样式
          fontSize: '30',
          fontWeight: '400',
          color: subColor,
          textAlign: 'center',
          textBorderColor: 'rgba(0, 0, 0, 0)',
          textShadowColor: '#000',
          textShadowBlur: '0',
          textShadowOffsetX: 0,
          textShadowOffsetY: 1,
          rich: {
            unit: {
              fontSize: 14,
              color: subColor
            }
          }
        }
      },
    ],
    polar: {
      radius: ['80%', '80%'],
    },
    angleAxis: {
      max: 100,
      clockwise: false,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: 'liquidFill',
        radius: '70%',
        label: {
          show: false,
          normal: {
            color: '#fff',
            insideColor: 'transparent',
            textStyle: {
              fontSize: 0,
              fontWeight: 'bold',
            }
          }
        },
        // 圆球背景色
        backgroundStyle: {
          borderWidth: 1,
          color: 'transparent',
        },
        data: [
          value / 100,
          {
            value: value / 100,
            direction: 'left',
          },
        ],
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#5cfbff',
            },
            {
              offset: 1,
              opacity: 1, //透明度
              color: '#5cfbff',
            },
          ],
          global: false // 缺省为 false
        }],
        outline: {
          show: true,
          borderDistance: 0,
          itemStyle: {
            borderColor: '#5cfbff',
            borderWidth: 4
          }
        }
      },
    ]
  }
  option && myChart.setOption(option)
}
const testOneChart = (data) => {
  let chartDom = document.getElementById(data.id);
  let myChart = $echarts.init(chartDom)
  let option = {
    series: [{
      type: 'gauge',
      radius: '75%',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: true,
        itemStyle: {
          // borderWidth: 10,
          // borderColor: ['#FFC16B','#0050E7']
        }
      },
      axisLine: {
        lineStyle: {
          width: 20,
          borderColor: '#04BEFB'
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 5
      },
      color: '#00D7B5',
      data: [
        {
          value: 14,
          name: '车辆运距\n占比',
          title: {
            offsetCenter: ['1%', '40%']
          },
          detail: {
            offsetCenter: ['4%', '-10%']
          }
        }
      ],
      title: {
        fontSize: 14,
        color: '#A5A5A5'
      },
      detail: {
        width: 15,
        height: 6,
        fontSize: 36,
        color: 'auto',
        borderColor: 'auto',
        fontFamily: 'Barlow-Medium1',
        // borderRadius: 20,
        // borderWidth: 8,
        // formatter: '{value}'
        formatter: '{value}%'
      }
    }]
  }
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option)
}

const line = (data) => {
  var chart = $echarts.getInstanceByDom(document.getElementById(data.id))
  console.log(data.data,'21313213')
  let date = []
  let value = []
  data.data.forEach((item) => {
    date.push(Object.keys(item)[0])
    value.push(item[Object.keys(item)].toFixed(0))
  })
  if (chart){
    let optionUpdate = chart.getOption();
    optionUpdate.series[0].data = value;
    chart.setOption(optionUpdate);
  }else {
    let chartDom = document.getElementById(data.id);
    let myChart = $echarts.init(chartDom)
    let option = {
      // 鼠标悬浮弹窗样式
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(42, 92, 176, .6)',
        borderColor: "rgba(0, 255, 239, 1.0)",
        textStyle: {
          color: '#00FFEF'
        },
        axisPointer: {
          type: 'cross',
        }
      },
      grid: {
        top: '10%',
        bottom: '15%',
        left: '9%',
        right: '5%',
      },
      // 图例设置，由于两个不一样，设置属性差距大，故将其配置属性分开
      legend: [
        {
          data: [
            {
              name: '当前问题数'
            }
          ],
          textStyle: {
            color: "rgba(198, 198, 198, 1.0)"
          },
          itemWidth: 15,  // 矩形宽度
          itemHeight: 15, // 矩形高度
          top: '10px',
          left: '40%',
        },

      ],
      // 设置 X轴样式
      xAxis: [
        {
          type: 'category',
          data: date,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            color: '#fff',
            fontWeight: 'bold',
            interval:1,//使x轴横坐标全部显示
          }
        }
      ],
      // 设置 Y轴样式
      yAxis: [
        {
          type: 'value',
          min: 0,
          splitLine: {
            lineStyle: {
              color: "#096c79"
            }
          },
          axisLabel: {
            color: "#fff",
            formatter: '{value}'
          },
          nameTextStyle: {
            // color: "rgba(66, 134, 206, 1.0)"
            color: "#fff"
          }
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: "30%",
          // 设置柱状图样式
          itemStyle: {
            normal: {
              label: {
                formatter: "{c}"+"%",
                show: true,
                position: "top",
                textStyle: {
                  fontWeight: "bolder",
                  fontSize: "15",
                  color: '#fff'
                }
              },
              barBorderRadius: [2, 2, 0, 0],
              color: new $echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#00FFEF'},
                    {offset: 1, color: '#007EFF'}
                  ]
              )
            }
          },
          data:value,
        },
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option)
  }

}
const lightSpot = (data) => {
  var chart = $echarts.getInstanceByDom(document.getElementById(data.id))
  let list = []
  let name = []
  let value = []
  data.data.forEach((item) => {
    list.push({name:Object.keys(item)[0],value:item[Object.keys(item)]})
    name.push(Object.keys(item)[0])
    value.push(item[Object.keys(item)].toFixed(0))
  })
  let coords = []
  for (let i = 0; i < list.length; i++) {
    let item = []
    item.push(list[i].name)
    item.push(list[i].value.toFixed(0))
    coords.push(item)
  }
  if (chart){
    let optionUpdate = chart.getOption();
    optionUpdate.series[0].data = value;
    // '09-17', '09-18', '09-19', '09-20', '09-21', '09-22', '09-23'
    optionUpdate.series[1].data = [{coords}]
    chart.setOption(optionUpdate);
    return;
  }
  let chartDom = document.getElementById(data.id);
  let myChart = $echarts.init(chartDom)
  let option = {
    // 鼠标悬浮弹窗样式
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(42, 92, 176, .6)',
      borderColor: "rgba(0, 255, 239, 1.0)",
      textStyle: {
        color: '#00FFEF'
      },
      axisPointer: {
        type: 'cross',
      }
    },
    grid: {
      top: '10%',
      bottom: '15%',
      left: '12%',
      right: '5%',
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: "#fff",
      },
      data: name,
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: "#fff",
      }
    },
    series: [
      {
        name: '上线率数量',
        type: 'line',
        data: value,
        label: {
          formatter: "{c}"+"%",
          show: true,
          position: 'top',
          fontSize: "15",
          color: '#fff'
        },
      },
      {
        name: '滑行的光点',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        polyline: true,
        effect: {
          show: true,
          period: 3, // 速度
          trailLength: 0.3,
          symbolSize: 5,
          symbol: 'circle',
          color: '#fff',
        },
        data: [{coords}]
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option)
}
const area = (data) => {
  let chartDom = document.getElementById(data.id);
  let myChart = $echarts.init(chartDom)
  let option = {
    color: ["#00D8FF"],
    // 鼠标悬浮弹窗样式
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(42, 92, 176, .6)',
      borderColor: "rgba(0, 255, 239, 1.0)",
      textStyle: {
        color: '#00FFEF'
      },
      axisPointer: {
        type: 'cross',
      }
    },
    grid: {
      top: '10%',
      bottom: '15%',
      left: '18%',
      right: '5%',
    },
    legend: {
      y: "bottom",
      itemGap: 30,
      itemWidth: 30,
      itemHeight: 10,
      textStyle: {
        fontSize: 13, //字体大小
        color: "rgb(142, 199, 220)", //字体颜色
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "24:00",],
        axisLabel: {
          show: true,
          textStyle: {
            color: ["rgb(142, 199, 220)"],
          },
        },
        axisLine: {
          lineStyle: {
            color: "#023c7a",
            width: 1,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          formatter: "{value} °C",
        },
        splitLine: {
          lineStyle: {
            width: 1,
          },
        },
        axisLine: {
          lineStyle: {
            width: 1,
          },
        },
      },
    ],
    series: [
      {
        symbolSize: 0, //折线点的大小
        type: "line",
        data: [6000, 4000, 8000, 10000, 4000, 2000, 4000, 2000, 6000],
        areaStyle: {
          normal: {
            //前四个参数代表位置 左下右上，暗青色到亮青色，
            color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: "rgba(12,180,250, 1)"}, //从上往下的渐变
              {offset: 1, color: "rgba(63, 208, 249, 0)"},
            ]),
          },
        },
        lineStyle: {
          shadowColor: "#5cfbff", //透明的颜色
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          opacity: 1, //透明度
          shadowBlur: 8, //阴影大小
          type: "solid", //实线
          width: 2,
        },
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option)
}
const camber = (data) => {
  let chartDom = document.getElementById(data.id);
  let myChart = $echarts.init(chartDom)

  let data1 = data.value  //最大100
  let getvalue = data1 / 100 * 180
  let option = {
    title: {
      text: getvalue + '%',
      textStyle: {
        color: data.fontColor,
        fontSize: 20,
        fontFamily:'Barlow-Medium1',
      },
      subtext: data.name,
      subtextStyle: {
        color: '#fff',
        fontSize: 14,
      },
      itemGap: 10,
      left: 'center',
      top: '45%',
    },

    angleAxis: {
      // 起始角度，180 也可以是 225
      startAngle: 180,
      max: 360,
      clockwise: true, // 逆时针
      // 隐藏刻度线
      show: false
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false

      },
      axisTick: {
        show: false
      }
    },
    polar: {
      center: ['50%', '65%'],
      radius: '180%', //图形大小
    },
    series: [
      {
        type: 'bar',
        z: 2,
        // 数值
        data: [getvalue],
        showBackground: true,
        backgroundStyle: {
          color: 'transparent',
        },
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: 10,
        barGap: '-100%',
        itemStyle: {
          normal: {
            opacity: 1,
            color: new $echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: data.lineColor[0]
              }, {
                offset: 1,
                color: data.lineColor[1]
              }]),
            shadowBlur: 5,
            shadowColor: data.lineColor[2]
          }
        }
      },
      {
        type: 'bar',
        z: 1,
        // 需要的圆环跨度大小，可以是180,270等
        data: [180],
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: 10,
        barGap: '-100%',
        itemStyle: {
          normal: {
            opacity: 1,
            color: data.lineColor[3],
          }
        }
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option)
}


const props = defineProps(['fluorescentCakeData','columnarData'])



let columnarMyChart;
const columnar = () => {
  let chartDom = document.getElementById(props.columnarData.id);
  columnarMyChart = $echarts.init(chartDom)
  let data = [],legend = [];
  props.columnarData.dataList.map((k,i)=>{
    data.push(k.value);
    legend.push(k.name);
  })
  let option = {
    xAxis: {
      type: 'category',
      data: legend,
      // x坐标轴为虚线
      axisLine: {
        lineStyle: {
          color: 'rgba(11, 73, 125, 0.33)',
          opacity: 0.8
        }
      },
      // 不展示下面｜
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        color: '#B0E1FF',
        fontSize: 14 // 字体大小
      }
    },
    yAxis: {
      type: 'value',
      // 不展示刻度线
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false,
        color: '#B0E1FF',
        fontSize: 14 // 字体大小
      }
    },
    // 栅格
    grid: {
      left: '0',
      right: '0',
      bottom: '0%',
      top: '20px',
      containLabel: true
    },
    series: [
      // 数据低下的圆片
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [16, 8], // 宽，高
        symbolOffset: [0, 4], // 左 上
        z: 3,
        symbol: 'diamond',
        itemStyle: {
          color:  new $echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: "#235DFF" // 0% 处的颜色
          }, {
            offset: 0.5,
            color: "#59ACF7" // 50% 处的颜色
          }, {
            offset: 1,
            color: "#71CAFF" // 100% 处的颜色
          }], false),
        },
        data:data
      },
      // 数据的柱状图
      {
        name: '',
        type: 'bar',
        barWidth: 16,  // 柱条的宽度，不设时自适应。
        barGap: '-100%', // 不同系列的柱间距离
        itemStyle: {
          color: () => {
            return new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#4729FB" },
              { offset: 0.5, color: "#3077F7" },
              { offset: 1, color: "#1FB0F4" }
            ], false);
          },
        },
        data: data
      },
      // 数据顶部的样式
      {
        name: '',
        type: 'pictorialBar',
        symbol: 'diamond',
        symbolSize: [16, 8],
        symbolOffset: [0, -4],
        z: 3,
        itemStyle: {
          normal: {
            color: new $echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "#235DFF" // 0% 处的颜色
            }, {
              offset: 0.5,
              color: "#59ACF7" // 50% 处的颜色
            }, {
              offset: 1,
              color: "#71CAFF" // 100% 处的颜色
            }], false),
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              textStyle: {
                fontSize: '12',
                color: '#B0E1FF',
              }
            }
          }
        },
        symbolPosition: 'end',
        data: data
      },
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  option && columnarMyChart.setOption(option)
}


let fluorescentCakeMyChart;
const fluorescentCake = () => {

  let chartDom = document.getElementById(props.fluorescentCakeData.id);
  fluorescentCakeMyChart = $echarts.init(chartDom)
  let option

  let trafficWay = props.fluorescentCakeData.dataList;
  let total = 0;//总计
  props.fluorescentCakeData.dataList.map((k,i)=>{
    total = total + k.value
  })
  console.log(total)

  const data = []
  var color = ['#00ffff', '#ff0', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000','#ff0', ]
  for (var i = 0; i < trafficWay.length; i++) {
    data.push({
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        label: {
          normal: {
            show: false
          }
        },
        normal: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color[i],
          shadowColor: color[i]
        }
      }
    },
    {
      value: total * 0.05,
      name: '',
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      }
    })
  }
  option = {
    backgroundColor: 'rgba(255,255,255,0)',
    color: color,
    title: {
      text: '车辆类型',
      subtext: '',
      top: '45%',
      textAlign: "center",
      left: "49%",
      textStyle: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '600'
      },
      subtextStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: '400'
      }
    },
    legend: {
      icon: "circle",
      orient: 'horizontal',
      // x: 'left',
      data: ['功能区域噪声', '交通噪声', '区域噪声'],
      right: 250,
      top: 100,
      align: 'right',
      textStyle: {
        color: "#fff"
      },
      itemGap: 20
    },
    toolbox: {
      show: false
    },
    series: [{
      name: '',
      type: 'pie',
      clockWise: false,
      radius: [65, 60],
      hoverAnimation: false,
      label: {
        show: true,
        color: "#fff",
        formatter(param) {
          return !!param.data.name && param.data.name.length > 0 ?  param.name + ' (' + param.value + ')' : '';
          // return !!param.data.name && param.data.name.length > 0 ?  param.name + ' (' + param.percent + '%)' : '';
        }
      },
      data: data
    }]
  }
  // 使用刚指定的配置项和数据显示图表。
  option && fluorescentCakeMyChart.setOption(option)
}




const pieChart = (item) => {
  let chartDom = document.getElementById(item.id);
  let myChart = $echarts.init(chartDom)

  let title = '总量';
  let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
  let echartData = [{
    name: "离线",
    value: "3720"
  },
    {
      name: "营运",
      value: "2920"
    },
  ];

  let formatNumber = function(num) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ',');
  }
  let total = echartData.reduce((a, b) => {
    return a + b.value * 1
  }, 0);

  let option = {
    color: color,
    // tooltip: {
    //     trigger: 'item'
    // },
    title: [{
      text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
      top: '25%',
      left: 'center',
      textStyle: {
        rich: {
          name: {
            fontSize: 14,
            fontWeight: 'normal',
            color: '#fff',
            padding: [10, 0]
          },
          val: {
            fontSize: 26,
            fontWeight: 'bold',
            color: '#fff',
          }
        }
      }
    }],
    legend: {
      type: 'scroll',  //设置图例可滚动
      // orient: 'vertical',
      top: 'bottom',
      textStyle:{
        color:'#fff',
      },
      formatter: function (name) {  //图例后添加数值
        let data = option.series[0].data;
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].value;
          }
        }
        return name + ": " + tarValue;
      }
    },
    series: [{
      type: 'pie',
      radius: ['45%', '60%'],
      center: ['50%', '40%'],
      hoverAnimation: false,
      startAngle:90,//起始角度 不设置该值默认为：90
      minAngle:60,//设定 最小角度
      label: {
        show: false,
        color: "#fff",
        formatter(param) {
          return !!param.data.name && param.data.name.length > 0 ?  param.name + ' (' + param.value + ')' : '';
          // return !!param.data.name && param.data.name.length > 0 ?  param.name + ' (' + param.percent + '%)' : '';
        }
      },
      data: echartData,
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option)
}




onMounted(() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
  window.addEventListener('resize', windowChanges, false)
})

//窗口改变
const  windowChanges = ()=>{
  // debugger;
  if(fluorescentCakeMyChart != null && fluorescentCakeMyChart != "" && fluorescentCakeMyChart != undefined){
    toRaw(fluorescentCakeMyChart).resize();
  }else{
    nextTick(()=>{
      if (!!props.fluorescentCakeData){
        fluorescentCake();
      }
    })
  }
  if(columnarMyChart != null && columnarMyChart != "" && columnarMyChart != undefined){
    toRaw(columnarMyChart).resize();
  }else{
    nextTick(()=>{
      if (!!props.columnarData){
        columnar();
      }
    })
  }
};


defineExpose({
  water, //水滴
  testOneChart, //特殊统计
  line, //折线图
  lightSpot, //光点
  area, //面积
  camber, //弧形
  columnar, //3D柱状
  fluorescentCake, //饼图荧光
  pieChart, //饼图
})

</script>

<style scoped>



</style>
